<template>
	<!-- interractive 留言交互页面 -->
	<view class="top_container" style="">
		<u-loadmore :status="status" v-if="loading"/>
		<view class="no_data" v-if="it_list.length==0 && !loading">
			暂无留言信息
		</view>
		<view style="padding-bottom: 110rpx;" v-if="it_list.length">
			<view class="container" style="" v-for="(item,index) in it_list" @click="handleClickTheme(item.id, item)">
				<!-- <text>{{item.member_headr}}</text> -->
				<image :src="item.member_headr" mode="" class="left_head_img"></image>
				<view class="right_content">
					<view class="head">
						<view class="name_time" style="">
							<view style="font-size: 28rpx">{{item.member_name}}</view>
							<view style="">{{item.insert_time}}</view>
						</view>
						<view class="item_title">{{item.title}}</view>
					</view>
					<view>
						<view v-if="item.data.length!=0" v-for="(item1,index) in item.data " class="talk_list" @click.stop="handleClickComment(item.id, item1.id, item1)">
							<view >
								<!-- @click="reply(item1.id,item1.nickname)" -->
								<text style="color: #015BB4;">{{item1.nickname}}:</text>
								<text>{{item1.content}}</text>
							</view>
							<view class="content" v-if="item1.comment.length!=0">
								<!-- @click="reply(item2.id,item2.nickname)"  弹出键盘 -->
								<view style="margin-bottom: 5rpx;width:100%;" v-for="(item2,index) in item1.comment"  @click.stop="handleClickReply(item.id, item1.id, item2.id, item2)">
									<text style="color: #015BB4;">{{item2.nickname}}</text>
									<text>发布</text>
									<text style="color: #015BB4;">{{item2.by_nickname!=''?item2.by_nickname:''}}:</text>
									<text>{{item2.content}}</text>
								</view>
							</view>
						</view>
						<view class="more" v-if="item.loading" @click="hanldeLoading(item.id)">{{item.loading}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="input_box" v-if="it_list.length!=0">
			<input class="input" type="text" v-model="iput_val"  :focus="set_focus"  @confirm="sure_submit"   @blur="set_focus = false;" :placeholder="placeholder" confirm-hold="false" confirm-type="send">
			<view class="send_btn" @click="sure_submit">
				发布
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				it_list: '',
				reply_id:0,
				set_focus:false,
				iput_val:'',
				reply_name:'',
				placeholder: '',
				formData: {
					type: 0,
					id: 0,
					content:""
				},
				themeID: 0,
				commentID: 0,
				status: 'loading',
				loading: false
			}
		},
		onLoad() {
			this.loading = false;
			this.get_it_list()
		},
		methods: {
			// 加载更多评论
			hanldeLoading(id) {
				let item;
				for(let i = 0; i < this.it_list.length; i++) {
					if(this.it_list[i].id === id) {
						this.it_list[i].page++;
						this.$u.api.get_it_Details({
							id: id,
							page: this.it_list[i].page,
							psize: this.it_list[i].size
						}).then(res => {
							if(res.data.page_count > this.it_list[i].page) {
								this.it_list[i].loading = '点击加载更多';
							} else {
								this.it_list[i].loading = '';
							}
							this.it_list[i].data.push(...res.data.data);
						})
						break;
					}
				}
			},
			// 获取互动列表
			get_it_list() {
				this.loading = true;
				let self = this
				this.$u.api.get_it_list().then( res => {
					if (res.code == 200 && res.data.length > 0) {	
						this.getDatails(res.data, 0);
					} else {
						this.loading = false;
					}
				})
			},
			//获取二级详情评论的递归函数
			getDatails(val, i) {
				val[i].page = 1;
				val[i].size = 10;
				this.$u.api.get_it_Details({
					id: val[i].id,
					page: val[i].page,
					psize: val[i].size
				}).then(res => {
					if(res.data.page_count > val[i].page) {
						val[i].loading = '点击加载更多';
					} else {
						val[i].loading = '';
					}
					val[i].data = res.data.data;
					if(i < val.length - 1) {
						i++;
						this.getDatails(val, i);
					} else {
						this.it_list = val;
						this.loading = false;
					}
				})
			},
			// 回复
			// reply(id,nickname){
			// 	this.reply_id=id
			// 	this.reply_name=nickname
			// 	this.set_focus=true //弹出键盘
			// },
			// 提交评论
			sure_submit(){
				if(this.iput_val=='' || !this.formData.id){
					return
				} else {
					this.formData.content = this.iput_val;
				}
				let self=this
				this.$u.api.user_add_comments(this.formData).then(res=>{
					if(res.code==200){
						console.log('add', res)
						self.inser_content(self.iput_val, this.formData.id, res.data)
						uni.showToast({
							title:'回复成功',
							icon:'none'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
					// 清空标记变量
					this.formData = {
						type: 0,
						id: 0,
						content:""
					};
					this.iput_val='';
					this.themeID = 0;
					this.commentID = 0;
				})
				
				
			},
			// 插入评论到本地
			inser_content(content, id, data){
				let list=this.it_list;
				console.log('list', list)
				console.log('id', id)
				let obj={
					id: data.id,
					content:content,
					nickname:this.vuex_user_info.nickname,
					by_nickname:this.reply_name
				}
				console.log('obj', obj)
				
				if(data.type === 0) {
					list.forEach(item => {
						if(item.id === id) {
							item.data.unshift({
								...obj,
								comment: []
							})
						}
					})
				} else if(data.type === 1) {
					list.forEach(item => {
						if(item.id === this.themeID) {
							item.data.forEach(val => {
								if(val.id === id) {
									val.comment.unshift(obj)
								}
							})
						}
					})
				} else if(data.type === 2) {
					list.forEach(item => {
						if(item.id === this.themeID) {
							item.data.forEach(val => {
								if(val.id === this.commentID) {
									val.comment.push(obj)
								}
							})
						}
					})
				} else {
					return false
				}
				// for(var i=0;i<list.length;i++){
				// 	if(list[i].id==this.reply_id){
				// 		// 直接push到下面的comment
				// 		list[i].comment.push(obj)
				// 		break
				// 	}
				// 	for(var j=0;j<list[i].comment.length;j++){
				// 		if(list[i].comment[j].id==this.reply_id){
				// 			// 也是直接push到comment
				// 			list[i].comment.push(obj)
				// 			break
				// 		}
				// 	}
				// }
			},
			// 点击主题
			handleClickTheme(id, val) {
				this.themeID = 0;
				this.commentID = 0;
				this.formData.type = 0;
				this.formData.id = id;
				this.placeholder = '回复主题';
				this.$set(this, 'set_focus', true);
			},
			//点击评论
			handleClickComment(tid, id, val) {
				if(val.member_id== this.vuex_user_info.uid) {
					uni.showToast({
				    title: '暂时无法回复自己',
				    icon: 'none'
				  })
					return
				}
				this.themeID = tid;
				this.commentID = 0;
				this.formData.type = 1;
				this.formData.id = id;
				this.placeholder = '回复' + val.nickname;
				this.reply_name = val.nickname;
				this.$set(this, 'set_focus', true);
			},
			//  点击回复
			handleClickReply(tid, cid, id, val) {
				if(val.member_id== this.vuex_user_info.uid) {
					uni.showToast({
				    title: '暂时无法回复自己',
				    icon: 'none'
				  })
					return
				}
				this.themeID = tid;
				this.commentID = cid;
				this.formData.type = 2;
				this.formData.id = id;
				this.placeholder = '回复' + val.nickname;
				this.reply_name = val.nickname;
				this.$set(this, 'set_focus', true);
			}
		}
	}
</script>

<style lang="scss">
	.top_container {
		width: 100%;
		height: 100%;
		background-color: #F7F7F7;
		// display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		padding-top: 20rpx;
		.left_head_img {
			width: 80rpx;
			height: 80rpx;
			border-radius: 6rpx;
		}
		.no_data{
			width: 98%;
			height: 100rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			
			box-shadow: 0 0 5rpx #A9A9A9;
			
			// padding: 10rpx 10rpx 25rpx 10rpx;
			border-radius: 10rpx;
			margin: 0 auto;
			background-color: #FFFFFF;
		}
		.container {
			width: 98%;
			margin: 0 auto;
			box-shadow: 0 0 5rpx #A9A9A9;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 20rpx 10rpx 20rpx 10rpx;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 40rpx;
			.right_content {
				width: 90%;
				margin: 0 16rpx;
				.head {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					align-items: flex-start;
					border-bottom: 1px solid #B0AFAF;
					width: 100%;
					margin-bottom: 16rpx;
					.item_title {
						font-size: 28rpx;
						color: #575757;
						margin-bottom: 14rpx;
					}
					.name_time {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: flex-end;
						width: 100%;
						font-size: 20rpx;
						margin-bottom: 4rpx;
					}
				}
		
				.content {
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: flex-start;
					border-radius: 10rpx;
					background-color: #f2f2f2;
					padding: 16rpx;
				}
				
				.talk_list {
					font-size: 24rpx;
				}
			}
		}
		.input_box{
			position: fixed;
			width: 100vw;
			height: 100rpx;
			bottom: 0;
			background-color: #FFFFFF;
			box-shadow: 0 0 3rpx #f9f9f9;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: center;
			.input{
				width: 78%;
				height: 100rpx;
				padding-left: 20rpx;
			}
			.send_btn{
				width: 18%;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
			}
		}
	}
	.more {
		font-size: 20rpx;
		margin: 20rpx 0;
		text-align: center;
	}
	
</style>
